<template>
    <div class="container">
        <img src="@/assets/imgges/404.png" alt="404页面" width="500" />
        <div class="content">
            <div style="font-weight: 700; font-size: 60px">Oops!</div>
            <div style="color: #9BA0A6; font-size: 20px">
                糟糕，您访问的页面不存在
            </div>
            <button @click="goBack"
                style="border-radius: 30px; background-color: #000; color: #D4D5D5; height: 40px; width: 170px; ">
                <el-icon style="vertical-align: middle">
                    <ArrowLeftBold />
                </el-icon>
                返回上一级
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">

import { useRouter } from "vue-router";
import { ArrowLeftBold } from "@element-plus/icons-vue";
import useAuthStore from "@/stores/useAuthStore";

const authStore = useAuthStore()
const router = useRouter();

const goBack = () => {
    if (!authStore.userInfo?.menus.length) {
        // 退出登录
        authStore.logout()
        return
    }
    router.back()
}
</script>

<style scoped lang="scss">
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }
}
</style>
